<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>角色管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<jsp:include page="../header.jsp"></jsp:include>
<div style="padding: 16px;">
    <table class="layui-hide" id="role" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addRole">添加角色</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
    </div>
</script>
<script src="/layui/layui.js" type="text/javascript"></script>
<script>
    layui.use(['table', 'dropdown'], function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var $ = layui.$;

        // 创建渲染实例
        table.render({
            elem: '#role',   //  选择器
            id:'role',
            url: '/role?method=rolePage', // 此处为静态模拟数据，实际使用时需换成真实接口  ?page=1&limit=20
            toolbar: '#toolbarDemo',   // 绑定头部工具栏
            height: 'full-50', // 最大高度减去其他容器已占有的高度差
            cellMinWidth: 80,
            page: true,  // 开启分页
            cols: [[
                {field: 'id', title: 'ID'},
                {field: 'roleName', title: '角色名'},
                {field: 'createTime', title: '创建时间'},
                {field: 'updateTime', title: '更新时间'},
                {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
        });

        // 头部工具栏事件  lay-filter = test
        table.on('toolbar(test)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'deleteMore':
                    break;
                case 'addRole':
                    layer.open({
                        type: 2, // page 层类型
                        area: ['400px', '250px'],
                        title: '添加用户',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        resize: false,
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        content: 'add.jsp'
                    });
                    break;
            }
            ;
        });

        // 触发单元格工具事件  监听行工具事件
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            let id = data.id;
            sessionStorage.setItem("id",id)
            if (obj.event === 'edit') {
                layer.open({
                    type: 2, // page 层类型
                    area: ['400px', '250px'],
                    title: '编辑角色',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    resize: false,
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: 'edit.jsp'
                });
            } else if (obj.event === 'delete') {

                layer.confirm("删除当前行数据", function () {
                    // 发送异步请求删除用户信息
                    $.ajax({
                        url:'/role?method=delete',
                        data:{id},
                        dataType:'JSON',
                        type:'get',
                        success:function (res) {
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1, time: 3000}, function () {
                                    parent.layui.table.reloadData('role')
                                })
                            } else {
                                layer.msg(res.msg, {icon: 2})
                            }
                        }

                    })
                })

            }
        });
    });
</script>
</body>
</html>

